<template>
  <div>
    <div class="-body">
      <div class="chat-header border-bottom py-xl-4 py-md-3 py-2">
        <div class="container-xxl">
          <div class="row align-items-center">
            <div class="col-6 col-xl-4">
              <div class="media">
                <div class="avatar me-3">
                  <div
                    class="avatar rounded-circle no-image bg-primary text-light"
                  >
                    <span>
                    <img :src="form.avatar" alt="" 
                    style=" width:58px;height:58px;border-radius:50%;border:1px solid #F1F1F1;padding:4px">

                    </span>
                  </div>
                </div>
                <div class="media-body overflow-hidden">
                  <div class="d-flex align-items-center mb-1">
                    <h6 class="text-truncate mb-0 me-auto">[{{form.username}}]{{form.realname}}</h6>
                  </div>
                 <div v-if="form.online==true" class="text-truncate" >
 <i class="zmdi zmdi-circle text-success"></i>
 Online
</div>
<div v-if="form.online==false" class="text-truncate" >
 <i class="zmdi zmdi-circle text-danger"></i>
 Offline
</div>
                </div>
              </div>
            </div>

            <div class="col-6 col-xl-8 text-end"></div>
          </div>
        </div>
      </div>

   

      <div class="chat-content">
        <div class="container-xxl">
          <ul class="list-unstyled py-4">
          <block v-for="(item, index) in msgList" :key="index">
         
            <li class="d-flex message"  v-if="account.id==item.toid">
              <div class="mr-lg-3 me-2">
                <div
                  class="avatar sm rounded-circle bg-primary d-flex align-items-center justify-content-center"
                >
                  <span>
                  <img :src="item.to.info.avatar" alt="" style="width:48px;height:48px;border-radius:50%;border:1px solid #21aa93;padding:4px">

                  </span>
                </div>
              </div>

              <div class="message-body">
                
                
                <div class="message-row d-flex align-items-center">
                  <div class="message-content p-3">
                   {{item.con}}
                  </div>
                </div>

                

                <div class="message-row d-flex align-items-center">
                  <div class="message-content p-3">
                    Select the topic or write your question below.
                  </div>
                </div>

                
              </div>
            </li>

            
<li class="d-flex message right" v-if="account.id==item.fromid">
<div class="message-body">
<span class="date-time text-muted"> [{{item.from.username}}] {{item.from.realname}} {{item.created}} <i class="zmdi zmdi-check-all text-primary"></i></span>
<div class="message-row d-flex align-items-center justify-content-end">




<div class="message-content border p-3">
{{item.con}}
</div>
</div>

</div>
</li>




          </block>

            
          </ul>
        </div>
      </div>

      <div class="chat-footer border-top border-bottom py-xl-4 py-lg-2 py-2">
        <div class="container-xxl">
          <div class="row">
            <div class="col-12">
              <div class="input-group align-items-center">
                <input
                  type="text" v-model="con"
                  class="form-control border-0 pl-0"
                  placeholder="输入要发送的信息"
                />

                
                <div class="input-group-append">
                  <span class="input-group-text border-0">
                    <button
                      class="btn btn-sm btn-link text-muted"
                      data-toggle="tooltip"
                      title=""
                      type="button"
                      data-original-title="Attachment"
                    >
                      <i class="zmdi zmdi-attachment font-22"></i>
                    </button>
                  </span>
                </div>

                <div class="input-group-append">
                  <span class="input-group-text border-0 pr-0">
                    <button type="button" @click="send" class="btn btn-primary">
                      <span class="d-none d-md-inline-block me-2">发送</span>
                      <i class="zmdi zmdi-mail-send"></i>
                    </button>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { saveData,loadData } from '@/api/chatmsgApi'
import { getInfo } from '@/api/accountApi'
export default {
  data() {
    return {
      toId: 0,con:'',
      form: {},
      msgList:[],
      account: JSON.parse(localStorage.getItem("account")),
    };
  },
  mounted: function () {
    this.toId = this.$route.params.id;
  },
  watch: {
    $route() {
      this.toId = this.$route.params.id;
    },
    toId() {
      this.getInfo();
    },
  },
  created() {
    this.$nextTick(() => {
      this.toId = this.$route.params.id;
      this.getInfo();
      this.getMsg()
    });
  },
  methods: {
   getMsg(){
      let param = {
         uid:this.account.id,
      }
      console.log(param)
      loadData(param).then(resp=>{
         this.msgList = resp.data.data
         console.log(this.msgList)
      })
   },
   send(){
      if(this.con==''){
 this.$message({
                message: '请输入发送内容',
                type: 'error',
              })
      }else{
         let msg = {
            fromid:this.account.id,
            toid:this.toId,
            con:this.con
         }
         saveData(msg).then(resp=>{
this.getMsg()
         })
      }
   },
    getInfo() {
      let account_id = this.toId;
      getInfo({ id: account_id }).then((resp) => {
        let response = resp.data;

        if (response.code == 1) {
          this.form = response.data;
          this.form.avatar = process.env.VUE_APP_BASE_URL + this.form.avatar;
         
        } else {
          this.$message("获取信息失败");
        }
        console.log(resp);
      });

      console.log("account_id:" + account_id);
    },
  },
};
</script>